<!-- 项目看板 - 蓝旗机器人 -->
<template>
  <div class="robot">
    <div class="top">
      <el-row :gutter="20">
        <el-col :span="15" :xs="12" :sm="13" :md="14" :lg="15" :xl="16">
          <el-card shadow="always">
            <div slot="header" style="margin: 0;">
              <span class="cust-title-text"> 机器人简介 </span>
            </div>
            <div class="con con1">
              <img :src="content1.img" style="max-width:30vw;height: calc(100% - 40px);"/>
              <div class="info">
                <div class="info-top">
                  <p class="info-text"> {{content1.text}} </p>
                </div>
                <div class="info-bottom">
                  <div class="list-item" v-for="(i, idx) in content1.list" :key="idx">
                    <p> {{i}} </p>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="9" :xs="12" :sm="11" :md="10" :lg="9" :xl="8">
          <el-card shadow="always">
            <div slot="header" style="margin: 0;">
              <span class="cust-title-text"> 机器人造林效率 </span>
            </div>
            <div class="con con2">
              <cust-act-table
                ref="custActTable"
                style="width:100%;height:100%;"
                tableType=""
                :list="content2.tableData"
                :colConfigs="content2.columns"
                :showIdx="false"
                :pagin="false"
                rKey="index"
              ></cust-act-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="15" :xs="12" :sm="13" :md="14" :lg="15" :xl="16">
          <el-card shadow="always">
            <div slot="header" style="margin: 0;">
              <span class="cust-title-text"> 设备投入 </span>
            </div>
            <div class="con con3" id="pieChart" style="width: 100%;height: 250px;"></div>
          </el-card>
        </el-col>
        <el-col :span="9" :xs="12" :sm="11" :md="10" :lg="9" :xl="8">
          <el-card shadow="always">
            <div slot="header" style="margin: 0;">
              <span class="cust-title-text"> 项目目标 </span>
            </div>
            <div class="con con4">
              <div class="info">
                <div class="info-top">
                  <p class="info-text text1"> 治沙目标 </p>
                  <p v-for="(i, idx) in content4.value" :key="idx" class="list-item"> {{i}} </p> 
                  <p class="info-text text2">亩 </p>
                </div>
                <div class="info-bottom">
                  <p class="info-text"> {{content4.text}} </p>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import custActTable from "@/views/implementation/components/custActTable";
export default {
  name: 'robot',
  components: { custActTable },
  data() {
    return {
      content1: {
        img: require("@/assets/images/project-board-img.png"),
        text: `全自动荒漠化综合治理机器人“句芒-301”首次在正蓝旗开展“治沙行动”，外形酷似小型拖拉机，融合了极地自主导航技术、极地作业防护技术，采用离线锚点定位技术、视觉识别检测、无人机实地场景地图构建技术与多种先进算法，爬坡能力提升至30度，可适应更加复杂严峻极地作业环境，工作效率是人工效率的3倍到5倍以上。`,
        list: ["极地自主导航技术","极地作业防护技术","采用离线锚点定位技术","视觉识别检测","爬坡能力提升至30度"]
      },
      content2: {
        tableData: [
          {type: "沙柳", time: "19分钟", num: "159株", cost: "2.1升"},
          {type: "柠条", time: "21分钟", num: "170株", cost: "2.2升"},
          {type: "沙枣", time: "16分钟", num: "145株", cost: "2.3升"}
        ],
        columns: [
          {prop: 'type', label: '苗种', align: 'center'},
          {prop: 'time', label: '用时（每亩）', align: 'center'},
          {prop: 'num', label: '数量（每亩）', align: 'center'},
          {prop: 'cost', label: '油耗（每亩）', align: 'center'}
        ]
      },
      content3: {
        total: "13台",
        chartData: [
          {name: "大型全自动设备", value: 5},
          {name: "半自动作业设备", value: 3},
          {name: "其他作业设备", value: 4}
        ]
      },
      custPieChart: undefined,
      content4: {
        value: "2000",
        text: "本次项目是由内蒙古林草生态建设有限责任公司防沙治沙机械作业队率先在正蓝旗组织实施，投入了全自动荒漠化综合治理机器人、半自动荒漠化综合治理机器人等多台机械装备，将完成治沙任务2000亩，让治沙变得更高效、更精准、更便捷。"
      }
    }
  },
  mounted() {
    this.setHeight();
    this.$nextTick(() => {
      this.setPie();
      window.addEventListener('resize', this.setHeight);
    })
  },
  methods: {
    /**
     * @author Wrl
     * 饼图
     */
    setPie(){
      const pieChart = document.getElementById('pieChart')
      this.custPieChart = echarts.init(pieChart)
      const option = {
        color:["rgba(115, 160, 250, 0.8)", "rgba(115, 222, 179, 0.8)", "rgba(117, 133, 162, 0.8)"],
        legend: false,
        tooltip: {
          show: true,
          formatter: "{b}: {c} 台",
          formatter: (params) => {
            let name = params.name;
            let val = params.value;
            let str = `<p><span>${params.marker}</span>${name}:&nbsp;&nbsp;${val}台</p>`;
            return str
          }
        },
        series: [
          {
            name: "设备投入",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              itemStyle: {
                borderWidth: 0,
                borderColor: 'rgba(255, 255, 255, 0.05)',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                return "{a| " + params.name + "}\n{b| " + params.value + "台}";
              },
              rich: {
                a: {
                  color: "#666666",
                  align: "left",
                  padding: 4,
                  fontSize: 16,
                },
                b: {
                  color: "#3DB99A",
                  align: "left",
                  padding: 4,
                  fontWeight: 600,
                  fontSize: 16,
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: this.content3.chartData,
          },
        ],
      }
      this.custPieChart.setOption(option)
    },
    /**
     * @author Wrl
     * 动态设置组件高度
     */
    setHeight() {
      setTimeout(() => {
        let bodyinnerH = document.querySelector('.app-main').offsetHeight;
        console.log('bodyinnerH', bodyinnerH);
        let halfH = (bodyinnerH - 40) / 2 - 5; // [容器高度 - (paddingTop+paddingBottom)]/2 - 上下组件间距/2
        let cardH = document.querySelector('.el-card').offsetHeight;
        let cardHeadH = document.querySelector('.el-card__header').offsetHeight;

        console.log('halfH', halfH);
        document.querySelector('.top').style.height = `${halfH}px`;
        document.querySelector('.bottom').style.height = `${halfH}px`;
        let conH = halfH - 45;
        document.querySelector('.con1').style.height = `${conH}px`;
        document.querySelector('.con2').style.height = `${conH}px`;
        document.querySelector('.con3').style.height = `${conH}px`;
        document.querySelector('.con4').style.height = `${conH}px`;
        let con4 = document.querySelector('.con4').style.height;
        console.log('con4', con4);
        document.querySelector('.con1 .info-top').style.height = halfH - 205 + 'px'
        document.querySelector('.con4 .info-bottom').style.height = halfH - 210 + 'px'
        echarts.init(document.getElementById('pieChart')).resize();

      }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
  .robot {
    padding: 16px;
    ::v-deep {
      .el-row,
      .el-col,
      .el-card {
        height: 100%;
      }
      .el-card__body {
        padding: 0;
      }
    }
    .con {
      padding: 16px;
      overflow: hidden;
      width: 100%;
      &.con1 {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        .info {
          height: calc(100% - 40px);
          overflow: hidden;
          margin-left: 16px;
          .info-top {
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 0;
            }
            .info-text {
              margin: 0;
              text-indent: 2em;
              text-align: justify;
              font-size: 16px;
              line-height: 32px;
            }
          }
          .info-bottom {
            color: #3DB99A;
            padding: 0 10px 0 0;
            width: 100%;
            margin-top: 16px;
            display: inline-flex;
            background: rgba(61, 185, 154, 0.05);
            justify-content: space-between;
            align-items: center;
            .list-item {
              color: #3DB99A;
              font-size: 16px;
              height: 100%;
              display: inline-flex;
              align-items: center;
              &::before {
                content: "";
                display: inline-block;
                width: 4px;
                height: 40px;
                background: #3DB99A;
                margin: 8px 10px;
              }
              p {
                width: 5em;
              }
            }
          }
        }
      }
      &.con3 {
        padding: 16px 0;
      }
      &.con4 {
        position: relative;
        .info {
          height: calc(100% - 40px);
          overflow: hidden;
          .info-top {
            color: #3DB99A;
            padding: 0 10px 0 0;
            width: 100%;
            margin-top: 16px;
            display: inline-flex;
            background: rgba(61, 185, 154, 0.05);
            border: 1px solid rgba(61, 185, 154, 0.05);
            justify-content: center;
            align-items: center;
            text-align: center;
            .text1 {
              margin-right: 10px;
            }
            .text2 {
              margin-left: 10px;
            }
            .list-item {
              width: 30px;
              height: 40px;
              border-radius: 2px;
              font-size: 30px;
              margin: 16px 2px;
              text-align: center;
              font-family: PingFangSC-Medium;
              background-color: rgba(255, 255, 255, 1);
              box-shadow: 0px 2px 2px 0px rgba(164, 207, 233, 1);
              border: 1px solid rgba(255, 255, 255, 0.5);
              color: #3DB99A;
            }
          }
          .info-bottom {
            position: absolute;
            left: 0;
            bottom: 20px;
            padding: 0 16px;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 0;
            }
            .info-text {
              margin: 0;
              text-indent: 2em;
              text-align: justify;
              font-size: 16px;
              line-height: 32px;
            }
          }
        }
      }
    }
    .cust-title-text {
      color: #11A983;
      font-size: 2.2vh;
      display: block;
      width: max-content;
    }
    .bottom {
      margin-top: 2vh;
    }
  }
</style>
